<template>
  <div class="medical-background">
    <!-- 标题 -->
    <div class="title-wrapper">
      <div class="title-bar"></div>
      <span class="title-text">医疗背景</span>
    </div>

    <!-- 横线 -->
    <div class="divider-wrapper">
      <div class="highlight-line"></div>
    </div>

    <!-- 主体内容 -->
    <div class="content-wrapper">
      <div class="table-group">
        <!-- 左侧表格：医疗与健康 -->
        <table class="info-table">
          <tbody>
            <tr v-for="(item, index) in data" :key="'med-' + index">
              <td>{{ item.question }}</td>
              <td>
                <label>
                  <input
                    disabled
                    type="radio"
                    :name="'med-' + index"
                    :checked="item.value"
                  />
                  是
                </label>
              </td>
              <td>
                <label>
                  <input
                    disabled
                    type="radio"
                    :name="'med-' + index"
                    :checked="!item.value"
                  />
                  否
                </label>
              </td>
            </tr>
          </tbody>
        </table>

        <!-- 右侧表格：生活方式与个人史 -->
        <table class="info-table">
          <tbody>
            <tr v-for="(item, index) in lifestyleData" :key="'life-' + index">
              <td>{{ item.question }}</td>
              <td>
                <span class="check-box" :class="{ checked: item.value }"></span>
                是
              </td>
              <td>
                <span
                  class="check-box"
                  :class="{ checked: !item.value }"
                ></span>
                否
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useUserStore } from "@/store/modules/user";
import { defineProps, onMounted, ref } from "vue";
import { healthinfo } from "@/api/business/sperm";

const userStore = useUserStore();
const userId = ref();

const medicalInfo = ref({});
const data = ref([]);
const lifestyleData = ref([]);
const loading = ref(true);

/**
 * 获取医疗背景信息
 */
function getList() {
  loading.value = true;
  healthinfo({ userId: userId.value })
    .then((res) => {
      medicalInfo.value = res.data;

      /* 统一布尔转换函数 */
      const toBool = (v) =>
        v === "1" ||
        v === 1 ||
        v === true ||
        v === "yes" ||
        v === "是" ||
        v === "Y" ||
        v === "problem";

      /* 医疗与健康 */
      data.value = [
        {
          question: "是否收养子女?",
          value: toBool(medicalInfo.value?.isAdopted),
        },
        {
          question: "是否有听力问题?",
          value: toBool(medicalInfo.value?.hearingProblems),
        },
        { question: "是否吸烟?", value: toBool(medicalInfo.value?.smoking) },
        {
          question: "是否有精神问题?",
          value: toBool(medicalInfo.value?.psychiatricCare),
        },
      ];

      /* 生活方式与个人史 */
      lifestyleData.value = [
        {
          question: "是否近视?",
          value: medicalInfo.value?.nearsightedness != null,
        },
        {
          question: "是否做过近视矫正手术?",
          value: toBool(medicalInfo.value?.laserSurgery),
        },
        {
          question: "是否有牙齿问题？或戴过牙套？",
          value: toBool(medicalInfo.value?.dentalProblems),
        },
        {
          question: "是否有听力问题？",
          value: medicalInfo.value?.hearingProblems != null,
        },
      ];
    })
    .finally(() => {
      loading.value = false;
    });
}

const props = defineProps({
  userId: {
    type: String,
    required: true,
    default: "",
  },
});

onMounted(() => {
  userId.value = props.userId;
  getList();
});
</script>

<style lang="scss" scoped>
/* ===== 仅对「没写过字体/颜色」的文字补微软雅黑 + #333 ===== */
.medical-background {
  font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
  color: #333;
}
/* ========================================================= */

/* 根容器 */
.medical-background {
  /* 无额外样式 */
}

/* 标题区域 */
.title-wrapper {
  margin-top: 20px;
  display: flex;
  align-items: center;

  .title-bar {
    width: 6px;
    height: 26px;
    background-color: #2b5cab;
  }

  /* 已定义字体颜色，保持不变 */
  .title-text {
    margin-left: 10px;
    font-size: 24px;
    font-weight: bold;
    color: #2b5cab;
  }
}

/* 横线装饰 */
.divider-wrapper {
  height: 1px;
  background-color: #2b5cab;
  margin-top: 18px;
  position: relative;

  .highlight-line {
    width: 460px;
    height: 5px;
    background: linear-gradient(to right, #2b5cab, #cedbf0);
    border-radius: 2px;
    position: absolute;
    top: 0;
    left: 0;
  }
}

/* 主体内容 */
.content-wrapper {
  border: 1px solid #a2c4e8;
  border-radius: 8px;
  margin-top: 23px;
  padding: 20px 20px;

  /* 双列布局 */
  .table-group {
    display: flex;
    gap: 40px;

    @media (max-width: 1024px) {
      flex-direction: column;
    }
  }

  /* 表格公共样式 */
  .info-table {
    flex: 1;
    border-collapse: collapse;
    width: 100%;

    tr {
      border-bottom: 1px solid #e5e7eb;

      &:last-child {
        border-bottom: none;
      }

      td {
        padding: 16px 8px;
        font-size: 14px;
        vertical-align: middle;

        /* 首列加粗，颜色继承 #333 */
        &:first-child {
          font-weight: 600;
          width: 65%;
        }

        /* 单选框/复选框列居中 */
        &:not(:first-child) {
          width: auto;
          white-space: nowrap;
          text-align: center;
        }

        label {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          cursor: default;

          input[type="radio"] {
            margin: 0;
          }
        }

        /* 自定义复选框样式 */
        .check-box {
          display: inline-block;
          width: 14px;
          height: 14px;
          border: 1px solid #999;
          border-radius: 2px;
          margin-right: 6px;
          vertical-align: middle;
          position: relative;

          &.checked {
            background-color: #2b5cab;
            border-color: #2b5cab;

            &::after {
              content: "";
              position: absolute;
              top: 2px;
              left: 5px;
              width: 3px;
              height: 6px;
              border: solid #fff;
              border-width: 0 2px 2px 0;
              transform: rotate(45deg);
            }
          }
        }
      }
    }
  }
}
</style>
